<template>
  <div>
    <a-row>
      <a-col
        v-for="(item,index) in list"
        :key="index"
        class="itemCol"
        @click="lastFewDays(item.key,item.keyName)"
      >
        <span v-if="locale==='zhCN'">近{{ item.key }}日{{ item.keyName==='1'?'新建':'生效' }}任务</span>
        <span v-else>{{ item.keyName==='1'?'New':'Effect' }} {{ item.key }}d</span>
        <span class="itemCount">{{ item.count }}</span>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
export default {
  computed: {
    ...mapGetters(['myActiveProjectId', 'locale']),
  },
  props: {
    upgradeTriggerType: {
      type: String,
      default: ''
    },
  },
  data () {
    return {
      list: []

    }
  },
  mounted () {
    this.getList()
  },
  watch: {
  },
  methods: {
    getList () {
      const vm = this
      vm.$api.getTaskCountByDay({ projectIds: vm.myActiveProjectId, upgradeTriggerType:this.upgradeTriggerType }).then(res => {
        vm.list = res.data
      })
    },
    lastFewDays (day, type) {
      this.$emit('lastFewDays', day, type)
    }
  }
}
</script>
<style lang="less" scoped>
.itemCol {
  padding: 8px 0;
  cursor: pointer;
  :hover {
    color: @primary-color;
  }
  .itemCount {
    color: #797979;
    float: right;
    margin-right:8px;
  }
}
</style>
